<template>
	<div class="bill">
		<div class="head">
			<router-link tag="div" to="/index/home/me" class="rou"><</router-link>
			<div class="zd">我的账单</div>
			<router-link tag="div" to="/screen" class="sx">筛选</router-link>
		</div>
		<div class="content">
			<div class="ben">
				<div class="yue">本月</div>
				<div class="box">
					<div class="con" v-for="(item,index) in sjData" :key="index">
						<div class="bg"><img src="../../images/timg.jpg" alt="" /></div>
						<div class="font">
							<p>{{ item.xl }}</p>
							<p><span class="jg">{{ item.jg }}</span><span class="time">{{ item.time }}</span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="ben">
				<div class="yue">3月</div>
				<div class="box">
					<div class="con" v-for="(item,index) in sjData" :key="index">
						<div class="bg"><img src="../../images/timg.jpg" alt="" /></div>
						<div class="font">
							<p>{{ item.xl }}</p>
							<p><span class="jg">{{ item.jg }}</span><span class="time">{{ item.time }}</span></p>
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"bill",
		data(){
			return{
				sjData:[
					{
						xl:"幼儿园",
						jg:"￥59",
						time:"今天11点"
					},
					{
						xl:"小学",
						jg:"￥89",
						time:"昨天"
					},
					{
						xl:"初中",
						jg:"￥119",
						time:"前天"
					},
					{
						xl:"高中",
						jg:"￥149",
						time:"2018-04-01"
					},
					{
						xl:"大学",
						jg:"￥179",
						time:"2018-03-31"
					}
				]
			}
		}
	}
</script>

<style lang="less">
	.bill{
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zd{
				margin-left: 130/50rem;
			}
			.sx{
				margin-left: 80/50rem;
			}
		}
		.content{
			background: #fff;
			.ben{
				.yue{
					background: #d2d2d2;
					height: 50/50rem;
					line-height: 50/50rem;
					color:#000;
					font-size: 16/50rem;
				}
				.box{
					border-bottom: 10/50rem solid #f2f2f2;
					.con{
						margin-left: 20/50rem;
						padding-top: 10/50rem;
						margin-top: 10/50rem;
						overflow: hidden;
						.bg{
							/*background: #3AAE95;*/
							width: 100/50rem;
							height: 100/50rem;
							float: left;
							img{
								width: 100/50rem;
								height: 100/50rem;
							}
						}
						.font{
							float: left;
							margin-left: 10/50rem;
							font-size: 18/50rem;
							color: #000;
							line-height: 60/50rem;
							p{
								span{
									color:#757575;
									font-size: 16/50rem;
								}
								.time{
									margin-left: 10/50rem;
								}
								.jg{
									display: inline-block;
									width: 50/50rem;
								}
							}
						}
					}
				}
				
			}
		}
	}
</style>